<!DOCTYPE html>
<html>
<head>
	<title>{$book.name}在线阅读</title>
	{css href="/static/layout/css/bootstrap.min.css"}
    {css href="/static/css/toastr.min.css"}
    {css href="/static/index/css/content.css"}
    <style type="text/css">
        .pagination{position: fixed;}
        .pagination>li{ display: none;margin-bottom: 10px}
        .pagination>li>a,.pagination>li>span{ height: 80px; width:35px; font-size: 20px; line-height: 66px;}
        .pagination>li:first-child, .pagination>li:first-child{display: block;}
        .pagination>li:last-child, .pagination>li:last-child {display: block;}

    </style>
</head>
<body>
    <div class="left-warp">
         <div class="back-warp">
            <a href="{:url('index/Details/read',['id'=>$book.id])}">
                <b class="back-icon"></b>
                <span class="back-tit">退出阅读</span>
            </a>
        </div>
        <div class="pay-warp">
            <div class="book-info">
                <div class="book-tit">{$book.name}</div>
                <a href="{:url('index/Details/read',['id'=>$book.id])}" class="mgb15">
                    <img class="book-img" src="{$book.face}"></a>
                <div class="mgb30">
                    <a href="{:url('index/Details/read',['id'=>$book.id])}" class="pay-btn">去购买</a>
                    <div class="pay-value-wrap"><span class="pay-value mr10">￥{$book.price}</span></div>
                </div>
            </div>
        </div>
    </div>
   
    <div class="right-warp">
        <div class="dir-warp">
            <a href="javascript:;" class="dir-btn"><b class="tool-bar-icon icon-dir"></b>
                <span class="tool-bar-txt">目录</span>
            </a>
            <div class="dir-list">
                <div class="dir-container">
                    <div class="viewport">
                        <ul>
                         {if empty($status)}
                              {volist name="data" id="v" key="k" offset="0" length="3"}
                              <a href="{:url('index/Details/readbook',['id'=>$book.id])}/?page={$k}">
                                       <li>{$v['name']}</li></a>
                              {/volist}
                              {volist name="data" id="v" key="k" offset="3"}
                                <li style="color:#999">{$v['name']}</li>
                              {/volist}
                         {else/}
                             {foreach name="data" item="v" key="k"}
                               <a href="{:url('index/Details/readbook',['id'=>$book.id])}/?page={$k+1}">
                                       <li>{$v['name']}</li></a>
                             {/foreach}
                        {/if}
                        </ul>
                    </div>
                    
                </div>
            </div>
        </div>
        <div class="cmt-warp" style="clear:both;">
            <a href="javascript:;" class="cmt-btn" data-toggle="modal" data-target="#myModal">
                <b class="tool-bar-icon icon-cmt"></b>
                <span class="tool-bar-txt">发表评论</span>
            </a>
        </div>
        {$page}
    </div>


	<div class="content">
		<div class="tit-wrap">
			{volist name="list" id="v"}
			<div class="center">
				<div class="tit">{$v['name']}</div>
			</div>
			<div id="txt-cont">{$v['content']}</div>
            {/volist}
		</div>
		<div style="clear:both;"></div>
	</div>



    <!-- Modal -->
        <div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
          <div class="modal-dialog" style="margin-right:415px;">
            <div class="modal-content"style="width:800px;">
              <div class="modal-header" style="background-color:#FAFAF7;">
                <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
                <h4 class="modal-title" id="myModalLabel" style="color:#333">元芳,你怎么看</h4>
                <h5 class="modal-title" id="myModalLabel" style="float:right;color:#333;margin-top:-25px;margin-right:20px;">账号：<span style="color:#58bd5a;">{$Request.session.user.name}</span></h5>

              </div>
              <div class="modal-body">
                <form method="post" id="cmt-form">
                    <input type="hidden" name="cid" value="{$book.id}">
                    <label>评分</label>
                    <select name="cmt" style="width:150px;height: 30px;font-size: 20px;margin: 10px">
                        <option value="0">---</option>
                        <option value="1">*</option>
                        <option value="2">**</option>
                        <option value="3">***</option>
                        <option value="4">****</option>
                        <option value="5">*****</option>
                    </select>
                    <textarea name="content" style="width:758px; height: 120px; resize:none"></textarea>
                </form>
              <div class="modal-footer">
                <button class="btn btn-primary" id="cmtBtn">发表</button>
                <button type="button" class="btn btn-default" data-dismiss="modal" id="close">取消</button>
              </div>

            </div>

          </div>
        </div>
     <!-- Modal -->



    {js href="/static/js/jquery-2.1.4.min.js" }
    {js href="/static/layout/js/bootstrap.min.js" }
    {js href="/static/js/toastr.min.js"}
    <script type="text/javascript">
    $(function () {
        // 设置弹框参数
        toastr.options = {
            closeButton: true,// 是否显示关闭按钮
            progressBar: true,// 实现显示计时条
            timeOut: "3000",  // 自动关闭时间
            positionClass: "toast-top-right" // 提示位置
            // toast-top-full-width 顶端，宽度铺满整个屏幕
            // toast-top-right  顶端右边
        };

       /* 点击展开/收起目录 */
        var mark = true;
        $('.dir-btn').click(function () {
            if (mark) {
                mark = !mark;
                $(this).next().css({display:'block'});
            }else{
                mark = !mark;
                $(this).next().css({display:'none'});
            }
            
        });

        // 发表评论
        $('#cmtBtn').click(function () {
            data = $('#cmt-form').serialize();
            $('#cmt-form').submit(Comment(data));
        });


        function Comment(data) {
            $.ajax({
                data:data,
                type: 'post',
                url: '/index/Comment/create.html',
                dataType:'json',
                success: function (data) {
                    if (data.status) {
                        toastr.success(data.info);
                        $('#close').trigger('click');
                    } else {
                        toastr.error(data.info, 'FBI WARING:');
                    }
                },
                error: function () {
                    alert('AJAX操作失败');
                }
            });
        }

    });
    </script>
</body>
</html>